<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login In</title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />

	<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
	<link rel="stylesheet" type="text/css" href="css/util.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

	<div class="limiter" id="login">
		<div class="container-login100" style="background-image: url('images/about-bg.jpg');">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-49">登录</span>

					<div class="wrap-input100 validate-input m-b-23" data-validate="请输入用户名">
						<span class="label-input100">用户名</span>
						<input class="input100" type="text" name="username" placeholder="请输入用户名" autocomplete="off" id="user_name">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="请输入密码">
						<span class="label-input100">密码</span>
						<input class="input100" type="password" name="pass" placeholder="请输入密码" id="pass_word">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>

				    </br>


					<!--
					<div class="flex-col-c p-t-25">
						<a href="javascript:" class="txt2">立即注册</a>
					</div>
				-->
				</form>
					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button class="login100-form-btn" v-on:click="LoginIn()">登 录</button>
						</div>
					</div>
			</div>
		</div>
	</div>

	<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
	<script src="js/main.js"></script>

	<!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script>
		var app = new Vue({
			el: '#login',
			data: {
				login_in: {
					user_name: null,
					user_password: null
				},
				sign_in: {
					user_name: null,
					user_password: null
				}
			},
			methods: {
				LoginIn() {
					var body = {
						user_name: user_name.value,
						user_password: pass_word.value
					}

					console.log("进入登录函数！");
					$.ajax({
						type: "post",
						url: "/login",
						data: JSON.stringify(body),
						contentType: "application/json;charset=utf-8",
						context: this,
						success: function (data, status) {
							alert("登录成功");
							window.location.href="admin.html";
						}
					})
				}
			}
		})
	</script>
</body>

</html>